<template>
	<view class="index">
		<div class="top-card">
			<div class="left">
				<div class="left_title">
					<span>快乐秒贷-易得贷</span>
					<span>信用贷</span>
				</div>
				<div class="left_max">最高可借额度(元)</div>
				<div class="left_limit">100万</div>
				<div class="left_rate">年利率最低可至 <span>3.6%</span></div>
				<div class="left_characteristic">
					<span>随借随还</span>
					<span>超高额度</span>
					<span>秒速放款</span>
				</div>
			</div>
			<div class="right" @click="goToForm">获取额度</div>
		</div>
		<div class="wallet">
			<div class="wallet_left">
				<img src="../../static/wallet.png" alt="" />
				<div class="content">
					<div class="title">去借款</div>
					<div class="characters">按时还款，保持良好征信</div>
				</div>
			</div>
			<div class="wallet_right"  @click="goToForm">
				 去借款
			</div>
		</div>
	    <div class="bottom">
			不收取任何手续费，如有收费请致电
		</div>
		<register />
	</view>
</template>

<script>
	import register from '../components/register/index.vue'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		components:{
			register
		},
		onLoad() {

		},
		methods: {
			goToForm(){
				uni.navigateTo({
				  url: '/pages/form/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.top-card {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 10px 15px;
			background: linear-gradient(to right, #FFC066, #FF7536);
			height: 150px;
			border-radius: 10px;

			.left {
				color: #fff;

				&_title {
					font-weight: 500;
					font-size: 35rpx;

					span:nth-child(2) {
						display: inline-block;
						font-size: 20rpx;
						margin-left: 10px;
						padding: 5rpx 10rpx;
						border-radius: 2px;
						background-color: #5DA0D2;
					}
				}

				&_limit {
					font-size: 70rpx;
					font-weight: 600;
				}

				&_rate {
					padding: 10rpx 0;

					span {
						color: #FBFF7C;
					}
				}

				&_characteristic {
					background-color: #E8EBED;
					color: #66A7D8;
					padding: 5rpx;
					font-size: 25rpx;

					span {
						padding-left: 8rpx;
						padding-right: 8rpx;
					}

					span:not(:first-child) {
						border-left: 1px solid #66A7D8;
					}
				}
			}

			/* 定义一个名为'zoom'的动画 */
			@keyframes zoom {
				0% {
					transform: scale(1);
					/* 开始时原始大小 */
				}

				50% {
					transform: scale(1.2);
					/* 放大到1.2倍大小 */
				}

				100% {
					transform: scale(1);
					/* 结束时回到原始大小 */
				}
			}

			.right {
				position: absolute;
				right: 60rpx;
				top: 35%;
				font-size: 35rpx;
				color: #FD6B63;
				border-radius: 50%;
				padding: 20rpx 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				animation: zoom 2s infinite;
				/* 持续时间2秒，无限循环 */
				transition: transform 0.3s ease;
			}
		}
		.wallet{
			background-color: #F8F8FA;
			border-radius: 10px;
			margin-top: 15px;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&_left{
				display: flex;
				align-items: center;
				img{
					width: 30px;
					height: 30px;
				}
				.content{
					margin-left: 20rpx;
					.title{
						font-size: 35rpx;
						font-weight:600;
					}
					.characters{
						color: #9D9B9B;
					}
				}
			}
			&_right{
				color: #FD574F;
				border: 1px solid #DBDBDB;
				padding: 20rpx;
				border-radius: 30rpx;
			}
		}
	    .bottom{
			color: #C6C5C3;
			font-size: 27rpx;
			text-align: center;
			margin-top: 20rpx;
		}
	}
</style>